
<template>
    <div class="aclog">
        <div v-for="(item, index) in acLogs" :key="index" v-if="item.status == 1" class="block success">
            <H4  v-text="item.problem_id"></H4>
        </div>
        <p v-if="acLogs.length==0">没有AC的题目</p>
        <Spin size="large" fix v-if="spinShow"></Spin>
    </div>
</template>

<script>
import {Get} from '../api'
export default {
  name: "AcLogPart",
  data() {
    return {
        acLogs:[],
        spinShow:true
    };
  },
  props:{
    userId: {
      type: Number,
    }
  },
  computed: {},
  async created(){
    this.acLogs = await Get.getProblemStatus({active:"problem",user_id:this.user_id}).then((res)=>res.data);
    this.spinShow = false;
  }
};
</script>

<style lang="less" scoped>
.aclog {
  display: flex;
  flex-wrap: wrap;
  .block {
    width: 40px;
    height: 40px;
    margin: 5px;
    border-radius: 3px;
    line-height: 40px;
    text-align: center;
    transition: 0.36s all;
  }

  .success {
    background: rgb(144, 255, 141);
  }
}
</style>